<template>
  <!-- 进行处置 -->
  <h-modal :loading="submitLoading" class="event-modal" v-model="show" :title="`观察事件`" :centerTitle="title" @submit="submit">
    <a-form-model ref="ruleForm" :model="form" :rules="rules" size="large">
      <a-row :gutter="100">
        <a-col :span="12">
          <a-form-model-item label="事件类型" prop="typeId">
            <a-select v-model="form.typeId" placeholder="请选择事件类型">
              <a-select-option :value="item.id" v-for="item in eventList" :key="item.id">{{ item.name }}</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>

        <a-col :span="24">
          <a-form-model-item label="属地下发" prop="departIdList">
            <a-checkbox-group v-model="form.departIdList">
              <a-checkbox style="width: 140px;margin: 5px 0" v-for="item in addressList" :key="item.value" :value="item.value">{{ item.label }}</a-checkbox>
            </a-checkbox-group>
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item label="市级部门下发" prop="departIdList2">
            <a-checkbox-group v-model="form.departIdList2">
              <a-checkbox style="width: 300px;margin: 5px 0" v-for="item in addressList2" :key="item.value" :value="item.value">{{ item.label }}</a-checkbox>
            </a-checkbox-group>
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
  </h-modal>
</template>

<script>
import moment from 'moment';
// eslint-disable-next-line no-unused-vars
import {
  getEventTypeId,
  updateSentimentToObserve,
  getEventAddressOrder
} from '@/api/serve';
import cloneDeep from 'lodash/cloneDeep';

export default {
  props: {
    showModal: {
      type: Boolean,
      default: false
    },
    id: {
      type: String,
      default: ''
    },
    typeId: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: ''
    },
    handleType: {
      type: [String, Number],
      default: ''
    },
    dateDuty: {
      type: String,
      default: ''
    },
    label: {
      type: String,
      default: ''
    }
  },
  model: {
    prop: 'showModal',
    event: 'update:showModal'
  },
  watch: {
    showModal: {
      handler(val) {
        this.show = val;
        if (val) {
          this.form.id = this.id;
          this.form.typeId = this.typeId;
          this.form.departIdList = [];
          this.form.departIdList2 = [];

          // 获取事件类型
          this.init()
        }
      },
      immediate: true
    },
    show(val) {
      this.$emit('update:showModal', val);
    }
  },
  data() {
    return {
      moment,
      show: false,
      submitLoading: false,
      form: {
        id: '',
        typeId: '',
        departIdList: [],
        departIdList2: [],
      },
      rules: {
        typeId: [{ required: true, message: '请选择事件类型', trigger: 'change' }],
        departIdList: [{ required: true, message: '请选择属地下发', trigger: 'change' }],
      },
      eventList: [],
      addressList: [],
      addressList2: [],
    };
  },
  methods: {
    init() {
      getEventTypeId().then(res => {
        this.eventList = res.data;
      });
      getEventAddressOrder().then(res => {
        this.addressList = res.data.filter(res => res.isOut === 0).map(item => {
          return {
            label: item.address,
            value: item.id
          };
        });
        this.addressList2 = res.data.filter(res => res.isOut === 1).map(item => {
          return {
            label: item.depart,
            value: item.id
          };
        });
      });
    },
    submit() {
      if (this.submitLoading) return;
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.submitLoading = true;
          updateSentimentToObserve({
            id: this.form.id,
            typeId: this.form.typeId,
            departIdList: [...this.form.departIdList, ...this.form.departIdList2],
          }).then(res => {
            this.$message.success('操作成功');
            this.submitLoading = false;
            this.show = false;
            this.$emit('submit');

          }).catch(() => {
            this.submitLoading = false;
          });
        } else {
          this.submitLoading = false;
        }
      });
    }
  }
};
</script>

<style scoped>
  .cancel-btn {
    position: absolute;
    bottom: 40px;
    left: 80px;
  }
</style>
